<template>
  <div id="content">
    <div class="main">
      <div class="head">{{ $t("transfer.text1") }}</div>
      <div class="mainBody">
        <div class="inner">
          <div class="account">
            <div class="from">
              <el-dropdown trigger="click" @command="fromChange">
                <span class="el-dropdown-link">
                  {{ fromAccount }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    :command="item"
                    v-for="(item, index) in accountList"
                    :key="index"
                    >{{ item.account_name }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
            <img @click="swap" src="../../assets/img/huazhuan.png" />
            <div class="to">
              <el-dropdown trigger="click" @command="toChange">
                <span class="el-dropdown-link">
                  {{ toAccount }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    :command="item"
                    v-for="(item, index) in accountList"
                    :key="index"
                    >{{ item.account_name }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
          <div class="num inputBox">
            <input
              type="text"
              :placeholder="$t('transfer.text2')"
              v-model="num"
            />
          </div>
          <div class="accountInfo">
            <div class="balance">
              {{ $t("transfer.text3") }}：{{ balance }}USDT
            </div>
            <!-- <div class="serviceFee">手续费 {{fee}}USDT/次</div> -->
          </div>
          <div class="payPassword inputBox">
            <input
              type="password"
              :placeholder="$t('transfer.text4')"
              v-model="payPassword"
            />
          </div>
          <!-- <div class="verifyCode inputBox">
                        <input type="text" :placeholder="$t('transfer.text5')" v-model="verifyCode" />
          </div>-->
          <el-button type="primary" :loading="btnLoding" @click="submit">{{
            $t("transfer.text1")
          }}</el-button>
        </div>
        <div class="tip">
          <h2>{{ $t("transfer.text6") }}</h2>
          <p>{{ $t("transfer.text7") }}</p>
          <p>{{ $t("transfer.text8") }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { AccountList, transferID, transfer } from "@/api/assetstotal";
import { Passwordencryption } from "@/libs/util";
export default {
  data() {
    return {
      accountList: [], //账户列表
      fromAccount: "", //划转账户
      fromId: "", //划转账户id
      toAccount: "", //接收账户
      toId: "", //接收账户id
      num: "", //划转数量
      balance: 0, //可用余额
      // fee:5,//手续费
      payPassword: "", //支付密码
      // verifyCode: '', //验证码
      btnLoding: false, //按钮loading
      id: "", //币种ID
      accountTpye: "",
    };
  },
  mounted() {
    this.accountTpye = this.$route.query.type - 1;
    this.fromId = this.$route.query.type;
    this.getlist();
    transferID().then((res) => {
      this.id = res[0].wid;
    });
  },
  methods: {
    getlist() {
      // 获取账户列表
      AccountList().then((res) => {
        this.accountList = res;
        this.fromAccount = this.accountList[this.accountTpye].account_name;
        this.balance = this.accountList[this.accountTpye].balance;
      });
    },
    swap() {
      let formObj = this.accountList.find((item) => item.account_name == this.fromAccount);
      let toObj = this.accountList.find((item) => item.account_name == this.toAccount);
      this.fromAccount = "";
      this.toAccount = "";
      if (toObj) this.fromChange(toObj);
      if (formObj) this.toChange(formObj);
    },
    fromChange(list) {
      if (this.toAccount == list.account_name) {
        this.$message.error(this.$t("transfer.text11"));
        return;
      } else {
        this.fromAccount = list.account_name;
        for (let i = 0; i < this.accountList.length; i++) {
          if (this.accountList[i].account_name == list.account_name) {
            this.balance = this.accountList[i].balance;
            this.fromId = this.accountList[i].account_id;
            this.fromAccount = this.accountList[i].account_name;
          }
        }
      }
    },
    toChange(list) {
      if (this.fromAccount == list.account_name) {
        this.$message.error(this.$t("transfer.text11"));
        return;
      } else {
        this.toAccount = list.account_name;
        for (let i = 0; i < this.accountList.length; i++) {
          if (this.accountList[i].account_name == list.account_name) {
            this.toId = this.accountList[i].account_id;
          }
        }
      }
    },
    submit() {
      if (this.toId == "" || this.fromId == "") {
        this.$message.error(this.$t("transfer.text12"));
        return;
      }
      if (this.num == "") {
        this.$message.error(this.$t("transfer.text2"));
        return;
      }
      if (this.payPassword == "") {
        this.$message.error(this.$t("transfer.text4"));
        return;
      }
      // if (this.verifyCode == '') {
      //     this.$message.error(this.$t('transfer.text5'));
      //     return
      // }
      this.btnLoding = true;
      let _data = {
        payment_password: this.payPassword,
        from_account: this.fromId,
        to_account: this.toId,
        wid: this.id,
        amount: this.num,
      };
      transfer(Passwordencryption(_data)).then((res) => {
          this.num = "";
          this.payPassword = "";
          // this.verifyCode = '';
          this.fromAccount = this.$t("transfer.text9");
          this.toAccount = this.$t("transfer.text10");
          this.fromId = "";
          this.toId = "";
          this.balance = 0;
          this.$message.success('操作成功')
      }).finally(err=>{
        this.btnLoding = false;
      });
    },
  },
};
</script>

<style scoped>
#content {
  background: #0a1017;
}

.main {
  width: 1260px;
  padding: 30px 0 20px;
  margin: 0 auto;
}

.main .head {
  height: 60px;
  line-height: 60px;
  padding: 0 30px;
  color: #fff;
  font-size: 18px;
  background: #182330;
  border-radius: 4px;
  margin-bottom: 10px;
}

.main .mainBody {
  padding: 50px 60px 60px;
  background: #182330;
}

.mainBody .inner {
  width: 470px;
  margin: 0 auto;
}

.mainBody .account {
  padding: 0 30px;
  display: flex;
  align-items: center;
  background: #131c28;
}

.account .from,
.account .to {
  box-sizing: border-box;
  width: 27%;
}

>>> .el-dropdown {
  width: 100%;
  color: #ffffff;
  font-size: 16px;
}

.el-icon--right {
  margin-left: 30px;
}

.account img {
  margin: 0 auto;
}

.inner .inputBox {
  height: 42px;
  margin: 36px auto 14px;
  background: #131c28;
}

.inner .inputBox input {
  padding: 0 25px;
  width: 98%;
  height: 100%;
  background: #131c28;
  color: #fff;
}

.accountInfo {
  display: flex;
  justify-content: space-between;
  color: #666;
  font-size: 14px;
}

.el-button {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  background: #3a80f4;
  color: #fff;
  margin: 37px 0;
  font-size: 18px;
  padding: 0;
  border: none;
}

.mainBody .tip h2 {
  color: #fff;
  font-size: 16px;
  margin-bottom: 21px;
}

.mainBody .tip p {
  color: #999;
  font-size: 14px;
  margin-bottom: 9px;
}
</style>
